<template>
  <div class="todolist">
    <home-nav :userData='userinfo'></home-nav>
    <div class="container">
      <div class="title">
        <h3>待办</h3>
        <!-- <a-button type="primary"><span class="iconfont icon-plus"></span>新建任务</a-button> -->
      </div>
      <div class="content">
        <a-tooltip>
          <template slot="title">
            当查询不到可切换导航栏进行查询
          </template>
          <div class="nav">
              <ul class="left">
                <li :class="['hoverShow',{clickShow:tabStatus==3}]" @click="handleToggle(3)">近一周</li>
                <li :class="['hoverShow',{clickShow:tabStatus==4}]" @click="handleToggle(4)">近一月</li>
                <a-badge :count="delayTotal" :offset=[-15,-2] :numberStyle="userControlStyle">
                   <li :class="['hoverShow',{clickShow:tabStatus==5}]" @click="handleToggle(5)">逾期</li>
                </a-badge>
                <a-badge :count="allTotal" :offset=[2,-2] :numberStyle="userControlStyle">
                  <li :class="['hoverShow',{clickShow:tabStatus==0}]" @click="handleToggle(0)">全部待办</li>
                </a-badge>
                <li :class="['hoverShow',{clickShow:tabStatus==1}]" @click="handleToggle(1)">已办</li>
                <li :class="['hoverShow',{clickShow:tabStatus==2}]" @click="handleToggle(2)">我发送的</li>
              </ul>
              <a-input-search style="width:25%;" placeholder="可按名称、编号、提交人模糊搜索" v-model="valueSearch" @search="handleSearch" />
          </div>
        </a-tooltip>
        <a-table
          class="todolist-content"
          :columns="todolistColumns"
          :data-source="todolistData"
          size='small'
          @change="pageChange"
          :pagination="pagination"
          :locale="{emptyText: '暂无数据，可以切换上面的导航栏，选择全部待办等进行查看'}"
        >
          <template slot="toAudit" slot-scope="text, record">
            <a-button type="primary" size="small" @click="handledispose(record)">{{(record.status== '已处理' || record.status=='已报工') ? '查看':'处理'}}</a-button>    
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import {getAction} from '@/api/manage'
export default {
  components:{
    'HomeNav': () => import('@/components/layouts/HomeNav'),
  },
  data () {
    return {
      userinfo:{
          info:this.$store.getters.userInfo,
          module:'todolist',
          // badgecount:''
      },
      url:{
        getTodoList:'/home/queryToHandle',
        getAllTaskAndDelaySum:'/home/getAllTaskAndDelaySum',
      },
      tabStatus:3,
      pagination:{
        total:0,
        current:1
      },
      currPageIndex:1,
      currPageSize:10,
      valueSearch:'',
      todolistColumns:[
        {
          title: '类型',
          dataIndex: 'type',
          width: '10%',
          align:'left'
        },
        {
          title: '名称',
          dataIndex: 'projectName',
          align:'left'
        },
        {
          title: '编号',
          dataIndex: 'projectNo',
          width:'8%',
          align:'center'
        },
        {
          title: '创建人',
          dataIndex: 'submitGuy',
          width:'8%',
          align:'center'
        },
        {
          title: '开始时间',
          dataIndex: 'submitTime',
          width:'12%',
          align:'center'
        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          width:'12%',
          align:'center'
        },
        {
          title: '接收人',
          dataIndex: 'acceptPerson',
          width:'12%',
          align:'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          width:'10%',
          align:'center'
        },
        { title: '操作', 
          dataIndex: 'url',  
          width:'10%',
          align:'center',
          scopedSlots: { customRender: 'toAudit' } 
        }
      ],
      todolistData:[],
      userControlStyle:{
          backgroundColor:'#ff745d',
          height:'15px',
          lineHeight:'15px'
      },
      delayTotal:'',
      allTotal:''
    }
  },
  mounted () {
    this.getAllTaskAndDelaySum()
    this.getTodoListData()
  },
  methods: {
    getTodoListData(){
      getAction(this.url.getTodoList,{pageSize:this.currPageSize,pageNo:this.currPageIndex,status:this.tabStatus,keyword:this.valueSearch,column:"submitTime",order:"desc"}).then(res=>{
        if(res.code==200){
          this.pagination.total = res.result.total;
          this.todolistData =res.result.records.map((item,index)=>{
            item.key=index
            if(!item.newFlag){
              item.url=this.HTE_OLD_SERVER_URL+`${item.url}bootToken=${Vue.ls.get(ACCESS_TOKEN)}${item.params}`
              return item
            }else{
              return item
            }
          })
        }else{
          this.$message.warning('数据加载失败'+res.message);
          console.log(res.message)
        }
      })
    },
    getAllTaskAndDelaySum(){
      getAction(this.url.getAllTaskAndDelaySum).then(res=>{
        if(res.code ==200 && res.result){
          this.allTotal = res.result.allTaskTotal
          this.delayTotal = res.result.dealyTaskTotal
        }
      })
    },
    handleToggle(index){
      this.tabStatus=index
      this.pagination.current=1
      this.currPageIndex=1;
      this.getTodoListData()
    },
    handleSearch(){
      this.getTodoListData()
    },
    handledispose(record){
      if(!record.newFlag){
        window.open(record.url,"_blank")
      }else{
        let urlJump = this.$router.resolve({path: record.url });
        window.open(urlJump.href,"_blank")
      }
    },
    pageChange(page){
      this.currPageIndex=page.current;
      this.currPageSize=page.pageSize;
      this.pagination.current=page.current
      this.getTodoListData();
    }
  },
};
</script>
<style lang="less" scoped>
.todolist{
  background-color: #f5f5f5;
  height: 100%;
  .container{
    padding:30px 125px;
    background-color: #f5f5f5;
    .title{
      display: flex;
      margin-bottom: 15px;
      h3{
        font-size: 18px;
        font-weight: 600;
        margin-right: 25px;
      }
      .icon-plus{
        font-size: 13px;
        padding-right: 5px;
      }
    }
    .content{
      background-color: #fff;
      padding: 20px;
      .nav{
        border-bottom: 1px solid #f6f7f8;
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        .left{
          list-style: none;
          display: flex;
          padding: 0;
          margin: 0;
          align-items: center;
          font-size: 15px;
          font-weight: 600;
          li{
            padding: 10px;
            &.hoverShow{
              cursor: pointer;
              border-bottom: 3px solid rgba(255,255,255,0);
              width: 85px;
              text-align: center;
              &:hover{
                border-bottom: 3px solid #0988dc;
              }
            }
            &.clickShow{
              width: 85px;
              text-align: center;
              color: #0988dc;
              border-bottom: 3px solid #0988dc;
              cursor: pointer;
            }
          }
        }
      }
      .todolist-content{
        margin-top: 20px;
        /deep/ .ant-table-small{
          border: unset;
          border-radius: unset;
        }
        /deep/ .ant-table-thead > tr > th{
          border: unset;
          border-radius: unset;
        }
        /deep/ .ant-table-thead{
          background-color:#f6f7f9 ;
        }
        /deep/ .ant-table-small > .ant-table-content > .ant-table-body{
          margin: 0;
        }
        /deep/ .ant-table-placeholder{
          color:red;
        }
      }
    }
  }
}
</style>
